<template>
  <view class="managementList">
    <z-paging ref="paging" style="background-color: #fff;" v-model="dataList" :auto="false" @query="queryList">
      <view class="tabs" slot="top">
        <view class="tab-item" @click="setIndex(index)" :class="currentIndex == index?'active':''"
          v-for="(item, index) in tabList" :key="index">
          {{item.name}}
        </view>
      </view>
      <view class="menu">
        <view class="menu-list" @click="toDetail(item)" v-for="(item, index) in dataList" :key="index">
          <view class="orderNo" style="margin-bottom: 10rpx;">
            订单编号 {{item.order_sn}}
          </view>
          <view class="downTime" style="display: flex;justify-content: center;" v-if="item.paid == 0">
            <text>交易剩余时间：</text> <uv-count-down :time="item.countDown" format="HH:mm:ss"></uv-count-down>
          </view>
          <view class="goodsItem" v-for="(item2, index2) in item.orderProduct" :key="index2">
            <image class="goodsImg" :src="item2.cart_info.product.image" mode=""></image>
            <view class="goodsInfo">
              <view class="goodsName text-twoline-ellipsis">
                {{item2.cart_info.product.store_name}}
              </view>
              <view class="info-tb" v-if="item.paid == 0">
                <view class="info-tb-fl">总库存 {{item2.product_num}}</view>
                <view class="info-tb-fr">预计收益 ￥{{item2.income}}</view>
              </view>
              <view class="block" v-if="item.paid == 1">
                <view>
                  入库时间: {{item.pay_time}}
                </view>
                <view v-if="item.status != 0">
                  售罄时间: {{item.sell_out_time}}
                </view>
              </view>
            </view>
          </view>
          <view class="footer" v-if="item.paid == 0">
            <view class="footer-fl">
              <text class="txt1">合计</text>
              <text class="txt2">￥{{item.total_price}}</text>
            </view>
            <view class="footer-fr">
              <view class="btn1" @click.stop="handleClose(item)">取消订单</view>
              <view class="btn2" @click.stop="openPicker(item)">立即支付</view>
            </view>
          </view>
          <view class="footer" style="display: flex;justify-content: flex-end;"
            v-if="item.paid == 1 && item.status == 1">
            <view class="btn2" @click.stop="jiesuan(item)">结算</view>
          </view>
        </view>
      </view>
    </z-paging>
    <uv-modal ref="modal" title="确认取消订单吗？" :showCancelButton="true" content='' @cancel="cancel"
      @confirm="confirm"></uv-modal>
    <uv-picker ref="picker" :columns="columns" @confirm="confirmPayWay" keyName="name"></uv-picker>
    <uv-modal ref="modal2" title="确认去结算吗？" :showCancelButton="true" content='' @cancel="cancel2"
      @confirm="confirm2"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        columns: [
          [{
              name: "微信",
              value: "weixin"
            },
            {
              name: "账户余额",
              amount: 0,
              value: "balance"
            }
          ]
        ],
        tabList: [{
            name: "待支付",
            value: 1
          },
          {
            name: "售卖中",
            value: 2
          },
          {
            name: "待结算",
            value: 3
          },
          {
            name: "已完成",
            value: 5
          },
        ],
        currentIndex: 0,
        params: {
          status: 1,
          page: 1,
          limit: 10
        },
        dataList: [],
        orderId: "",
        type: "weixin"
      }
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
    },
    onLoad() {
        this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        reqApi.getUserInfo({}).then(res => {
          console.log("获取用户信息", res);
          this.columns[0][1]['name'] = `账户余额(${res.data.now_money})`;
          uni.setStorageSync("userInfo", res.data);
        })
      },
      openPicker(item) {
        this.orderId = item.group_order_id;
        this.$refs.picker.open();
      },
      // 选择支付方式
      confirmPayWay(e) {
        const {
          name,
          value
        } = e.value[0];
        console.log('name', name);
        console.log('value', value);
        // this.formLine.type = value;
        this.type = value;
        reqApi.payOrder({
          id: this.orderId,
          type: this.type
        }).then(res => {
          uni.showToast({
            title: "支付成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.paging.reload();
          }, 1000)
        })
      },
      handleClose(item) {
        this.orderId = item.order_id;
        this.$refs.modal.open();
      },
      cancel() {
        console.log("点击取消按钮");
        this.$refs.modal.close();
      },
      jiesuan(item) {
        this.orderId = item.order_id;
        this.$refs.modal2.open();
      },
      cancel2() {
        console.log("点击取消按钮");
        this.$refs.modal2.close();
      },
      confirm2() {
        console.log('点击确认按钮');
        reqApi.jiesuan({
          id: this.orderId
        }).then(res => {
          uni.showToast({
            title: "结算成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.modal2.close();
            this.$refs.paging.reload();
          }, 1000)
        })
      },
      confirm() {
        console.log('点击确认按钮');
        reqApi.cancelOrder({
          id: this.orderId
        }).then(res => {
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.modal.close();
            this.$refs.paging.reload();
          }, 1000)
        })
      },
      queryList(pageNo, pageSize) {
        let temp = {
          page: pageNo,
          limit: pageSize,
          status: this.params.status
        }
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.orderList(temp).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          res.data.list.forEach(v => {
            let timestamp = new Date().getTime() - new Date(v.create_time).getTime();
            v.countDown = 30 * 60 * 1000 - timestamp;
          });
          this.$refs.paging.complete(res.data.list);
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.params.status = this.tabList[index].value;
        this.$refs.paging.reload();
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/management/managementDetail?order_id=${item.order_id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn2 {
    width: 200rpx;
    height: 80rpx;
    background: #EEA800;
    border-radius: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 80rpx;
  }

  .active {
    color: #EEA800 !important;
    border-bottom: 2rpx solid #EEA800;
    font-weight: bold;
  }

  .managementList {
    background: #fff;
    .tabs {
      display: flex;

      .tab-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 104rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;
      }
    }

    .menu {
      padding: 0 30rpx;
      box-sizing: border-box;

      .menu-list {
        padding: 30rpx 0;
        box-sizing: border-box;
        border-bottom: 2rpx solid #eee;

        .orderNo {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }

        .downTime {
          background: #FFF9EB;
          border-radius: 20rpx;
          padding: 10rpx;
          box-sizing: border-box;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #EEA800;
          margin: 20rpx 0;
          display: flex;
          align-items: center;
        }

        .goodsItem {
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;

          .goodsImg {
            width: 160rpx;
            height: 160rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
          }

          .goodsInfo {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .goodsName {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #222222;
            }

            .info-tb {
              display: flex;
              justify-content: space-between;

              .info-tb-fl {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
              }

              .info-tb-fr {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #FF4F44;
              }
            }
          }
        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;

          .footer-fl {
            display: flex;
            margin-right: 56rpx;

            .txt1 {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #222222;
            }

            .txt2 {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #FF4F44;
            }
          }

          .footer-fr {
            display: flex;
            justify-content: space-between;
            flex: 1;

            .btn1 {
              width: 200rpx;
              height: 80rpx;
              background: #EEEEEE;
              border-radius: 20rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #666666;
              text-align: center;
              line-height: 80rpx;
            }

            .btn2 {
              width: 200rpx;
              height: 80rpx;
              background: #EEA800;
              border-radius: 20rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #FFFFFF;
              text-align: center;
              line-height: 80rpx;
            }
          }
        }
      }
    }
  }
</style>